<template>
    <div class="search">
        <div :style="{padding: '24px', minHeight: '480px', background: '#fff'}">
            <div style="text-align: center;width: 100%;">
                <el-image :src="require('../../assets/searchbg.png')" style="width: 150px;margin:auto;" />
                <div style="width:50%;margin:auto;">
                    <el-tabs v-model="activeName" type="card">
                        <el-tab-pane label="关键字搜索" name="first">
                            <el-form ref="searchForm" width="50%" :model="searchInfo" class="demo-form-inline">
                                <el-form-item :rules="[
      {required: true, message: '搜索内容不能为空'}]" prop="title">
                                    <el-input placeholder="请输入搜索内容" v-model="searchInfo.title" class="input-with-select" @keyup.enter.native="enterSubmit">
                                        <el-select v-model="searchInfo.country" slot="prepend" placeholder="请选择站点">
                                            <el-option label="台湾" value="XIAPI"></el-option>
                                            <el-option label="马来" value="MY"></el-option>
                                            <el-option label="新加坡" value="SG"></el-option>
                                            <el-option label="越南" value="VN"></el-option>
                                            <el-option label="泰国" value="TH"></el-option>
                                            <el-option label="菲律宾" value="PH"></el-option>
                                            <el-option label="印尼" value="ID"></el-option>
                                        </el-select>
                                    </el-input>
                                </el-form-item>
                                <el-form-item style="margin-top: 15px">
                                    <el-button @click="resetSearch">{{$t('重置')}}</el-button>
                                    <el-button type="primary" icon="el-icon-search" @click="enterSubmit">{{$t('搜索')}}</el-button>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                        <el-tab-pane label="排名搜索" name="second">
                            <el-form ref="searchKeyForm" width="50%" :model="searchKeyInfo" class="demo-form-inline">
                                <el-form-item :rules="[
      {required: true, message: '关键字不能为空'}]" prop="title" style="margin-bottom: 15px">
                                    <el-input placeholder="请输入关键字" v-model="searchKeyInfo.title" class="input-with-select" @keyup.enter.native="enterSubmit">
                                        <el-select v-model="searchKeyInfo.country" slot="prepend" placeholder="请选择站点">
                                            <el-option label="台湾" value="XIAPI"></el-option>
                                            <el-option label="马来" value="MY"></el-option>
                                            <el-option label="新加坡" value="SG"></el-option>
                                            <el-option label="越南" value="VN"></el-option>
                                            <el-option label="泰国" value="TH"></el-option>
                                            <el-option label="菲律宾" value="PH"></el-option>
                                            <el-option label="印尼" value="ID"></el-option>
                                        </el-select>
                                    </el-input>
                                </el-form-item>
                                <el-form-item :rules="[
      {required: true, message: '商品链接不能为空'}]" prop="url" label="商品链接" style="margin-bottom: 15px">
                                    <el-input placeholder="http://xiapi.xiapibuy.com/" v-model="searchKeyInfo.url" class="input-with-select">
                                    </el-input>
                                </el-form-item>
                                <el-form-item style="margin-top: 15px">
                                    <el-button @click="resetKeySearch">{{$t('重置')}}</el-button>
                                    <el-button type="primary" icon="el-icon-search" @click="enterKeySubmit">查找排名</el-button>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
            <el-alert type="success" style="margin-top: 10px;">
                <a style="font-size: 16px;" href="https://mp.weixin.qq.com/s/kXU9PbO1XgwNjmZ2yYdl4A" target="_blank">查看视频教程</a>
                <a style="font-size: 16px;margin-left: 10px" href="http://oss.roctc.com/plugin/51shopee.crx" target="_blank">crx插件</a>
                <a style="font-size: 16px;margin-left: 10px" href="http://oss.roctc.com/plugin/51shopee.zip" target="_blank">zip插件</a>
                <ul class="news">
                    <li> 搜索需要谷歌插件</li>
                    <li>
                        1 已翻墙用户(可访问google、facebook、youtube) 点击这里快速安装 </li>
                    <li> 2 未翻墙用户 点击下载Google浏览器【极兔云仓】采集插件, 并安装 </li>
                </ul>
            </el-alert>
        </div>
    </div>
</template>
<script>
export default {
    name: 'XiapiBlack',
    data() {
        return {
            activeName: "first",
            isHas: false,
            extensionId: "ighcinojcnfkbmlfpjkelbjjlfcglnbc",
            searchKeyInfo: {
                country: "PH",
                title: "",
                url: ""
            },
            searchInfo: {
                ads: 1,
                country: "PH",
                title: "",
                totalCount: 100,
                orderBy: "relevancy",
                customOrderBy: "0",
                maxPrice: null,
                minPrice: null,
                minSold: null,
                maxSold: null,
            }
        };
    },
    mounted: function() {
        // this.checkChromeExtend();
    },
    computed: {

    },
    methods: {
        resetSearch: function() {
            this.$refs['searchForm'].resetFields();
        },
        enterSubmit: async function(val) {

            if (!this.isHas) {
                await this.checkChromeExtend();
            }

            if (this.isHas) {

                this.$refs['searchForm'].validate((valid) => {
                    if (valid) {
                        chrome.runtime.sendMessage(this.extensionId, { action: "search", data: this.searchInfo });
                        setTimeout(() => {
                            this.$message('任务处理中请到搜索页面查看');
                        }, 500);
                    }
                });
            }
            //搜索

        },
        checkChromeExtend: async function() {
            //检查是否安装插件
            var me = this;
            try {
                chrome.runtime.sendMessage(this.extensionId, { action: "detect" },
                    function(reply) {

                        me.isHas = (reply == "ok");

                    });
            } catch {
                me.errorMessage("插件未安装");
            }
        },
        resetKeySearch: function() {
            this.$refs['searchKeyForm'].resetFields();
        },
        enterKeySubmit: async function(val) {

            if (!this.isHas) {
                await this.checkChromeExtend();
            }

            if (this.isHas) {

                var me = this;
                this.$refs['searchKeyForm'].validate((valid) => {
                    if (valid) {

                        chrome.runtime.sendMessage(this.extensionId, { action: "rank", data: this.searchInfo });
                        setTimeout(() => {
                            this.$message('任务处理中请到排序页面查看');
                        }, 500);
                    }
                });

            }
            //搜索

        },
    }
}
</script>
<style scoped>
.news li {
    list-style: none;
    font-size: 16px;
    line-height: 1.5;
}
</style>